<template>
    <el-container>
        <el-header style="text-align: center;">
            <h1>资产增删改查</h1>
        </el-header>
        <el-main style=" justify-content: center; align-items: center; margin: 10px 30px 30px 30px;">
            <el-row v-model="asset" style=" margin-bottom: 30px; border: 1.5px solid darkgray; padding: 10px;">
                <el-col :span="5" style="text-align: center;">
                    购买时间：<el-date-picker
                        v-model="asset.purchaseDate"
                        type="datetime"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right"
                        style="width: 70%;"
                        >
                        </el-date-picker>
                </el-col>
                <el-col :span="5" style="text-align: center;">
                    资产名：<input v-model="asset.assetName" style="height: 32px;" type="text">
                </el-col>
                <el-col :span="4" style="text-align: center;">
                    状态：<input v-model="asset.status" style="height: 32px;" type="text" >
                </el-col>
                <el-col :span="4" style="text-align: center;">
                    价格：<input v-model="asset.purchasePrice" type="text" style="height: 32px;">
                </el-col>
                <el-col :span="2" style="text-align: center; ">
                    <el-button type="primary" icon="el-icon-search"  @click="search(asset)">搜 索</el-button>
                </el-col>
                <el-col :span="2" style="text-align: center; ">
                    <el-button v-model="asset" type="success" icon="el-icon-plus"  @click="add() ">新 增</el-button>
                </el-col>
                <el-col :span="2" style="text-align: center;">
                    <el-button type="danger" icon="el-icon-delete"  @click="handleDeleteBatch() ">批量删除</el-button>
                </el-col>
            </el-row>
       <!-- type="selection" ref="multipleTable"是自定义的唯一标识 
        选择框 type="index" 序号 prop:每一行的属性 align="center" 居中 -->
        <el-table
        :data="assetsList"
        :model="asset"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%; margin: 0 auto; border: 1.5px solid darkgray;">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="index" label="id" width="auto" align="center">
        </el-table-column>
        <el-table-column prop="purchaseDate" label="购买时间" width="auto" align="center">
        </el-table-column>
        <el-table-column prop="assetName" label="资产名" width="auto" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="auto" align="center">
        </el-table-column>
        <el-table-column prop="purchasePrice" label="价格" width="auto" align="center">
        </el-table-column>
        <el-table-column  align="center" label="删除" width="80px" fixed="right"> 
        <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.row, scope.$index)"></el-button>
        </template>
        </el-table-column>
         <el-table-column  
            align="center"
            label="修改"
            width="80px"
            fixed="right"
            > 
        <template slot-scope="scope">
            <el-button  type="primary" icon="el-icon-edit"  @click="getassetById(scope.row.id)"></el-button>
        </template>
        </el-table-column>
        </el-table>

        <!-- 打开表单:visible.sync="open" 点击表单外不关闭 :close-on-click-modal="false" -->
        <el-dialog :title="this.updateType" :visible.sync="open" :close-on-click-modal="false">
            <el-form 
            :model="asset" 
            label-width="120px"
            :rules="rules"
            ref="multipleTable"
            >
                <el-form-item label="资产名" prop="assetName">
                <el-input v-model="asset.assetName" autocomplete="off" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                <el-input v-model="asset.status" autocomplete="off" style="width: 70%;"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="purchasePrice">
                <el-input-number v-model="asset.purchasePrice" :precision=2 :step="0.1" :max="100" style="width:70%;"></el-input-number>
                </el-form-item>
                <el-form-item label="购买时间" prop="purchaseDate">
                        <el-date-picker
                        v-model="asset.purchaseDate"
                        type="datetime"
                        placeholder="选择日期时间"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right"
                        style="width: 70%;"
                        >
                        </el-date-picker>
                </el-form-item>
            </el-form>
       
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click=vaildForm(asset)>确 定</el-button>
            </div>
        </el-dialog>
        </el-main>
        <el-footer>
 
        </el-footer>
</el-container>
  
</template>
<script>

export default {
    name: 'AssetAsset',
    data () {
        return {
            form: {},
            open: false,
            updateType: "",
            assetsList: [],
            multipleSelection: [],
            id: '',
            purchaseDate: '',
            asset:{
                id: '',
                purchaseDate: '',
                assetName: '',
                status: '',
                purchasePrice: '',
            },

            rules: {
                assetName: [
                    { required: true, message: '请输入日志名称', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '请输入状态', trigger: 'blur' },
                ],
                purchaseDate: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
            }
            
        };
    },
    mounted: function () {    // 页面加载完成后执行
        this.getasset();
    },
    methods: {
        // handle 处理提示消息
         handleUpdate(asset) {
            this.$confirm('修改名称为：'+asset.assetName+'的记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.updateasset(asset);
                    this.open = false;
                }).catch(() => {
                    this.$message({type: 'info',message: '已取消修改'}); 
                });
        },
        handleDeleteBatch() {
            // 批量删除登录日志
            console.log(this.multipleSelection);
            let ids = [];
            for(let i=0;i<this.multipleSelection.length;i++){
                ids.push(this.multipleSelection[i].id);
            }
            this.$confirm('此操作将永久删除所选记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteassets(ids);
            }).catch(() => {
                this.$message({type: 'info',message: '已取消删除'}); 
            });
        },

        handleInsert(asset) {
            this.$confirm('新增名称为：'+asset.assetName+'的记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.insertasset(asset);
                    this.open = false;
                }).catch(() => {
                    this.$message({type: 'info',message: '已取消新增'}); 
                });
        },

        handleDelete(row, index){
            index = index + 1;
            // 删除登录日志
            this.$confirm('此操作将永久删除记录序号为：'+index+'，名称为：'+row.assetName+'，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.deleteasset(row.id);
        }).catch(() => {
                this.$message({type: 'info',message: '已取消删除'}); 
            });
        },

        // 具体的业务处理
        getasset() {
            // 获取登录日志
            this.$axios.get('http://127.0.0.1:8082/asset/list')
            .then(response => {
                this.assetsList = response.data.data
            }).catch(error => {
                console.log("query login log failed" + error);
            });
        },

       
        deleteasset(id) {
            this.$axios.delete('http://127.0.0.1:8082/asset/delete/' + id)
            .then(response => {
                if(response.data.data > 0) {
                    this.$message({
                        message: '删除成功',
                        type:'success'
                    });
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    });
                }
                this.getasset();
            }).catch(error => {
                console.log("delete login log failed" + error);
            });
        },

        deleteassets(ids) {
            // 批量删除登录日志
            console.log("批量删除的id",ids);
            this.$axios.delete('http://127.0.0.1:8082/asset/deleteBatch/'+ids.join(',')) // 必须用join将数组转换为字符串
            .then(response => {
                if(response.data.data > 0) {
                    this.$message({
                        message: '批量删除成功',
                        type:'success'
                    });
                } else {
                    this.$message({
                        message: '批量删除失败',
                        type: 'error'
                    });
                }
                this.getasset();
            }).catch(error => {
                console.log("delete login log failed" + error);
            });
        },

        getassetById(id) {
            this.open = true;
            this.updateType = "修改";
            this.clearSelection();
            // 获取登录日志
            this.$axios.get('http://127.0.0.1:8082/asset/getById/' + id)
            .then(response => {
                console.log(response.data.data);
                this.asset.id = response.data.data.id;
                this.asset.purchaseDate = response.data.data.purchaseDate;
                this.asset.assetName = response.data.data.assetName;
                this.asset.status = response.data.data.status;
                this.asset.purchasePrice = response.data.data.purchasePrice;
            }).catch(error => {
                console.log("query login log failed" + error);
                });
        },

        updateasset(asset) {
            console.log("更新的对象：", asset);
            // 修改登录日志 因为要传对象，用逗号，所以最后update路径不写 /
            this.$axios.put('http://127.0.0.1:8082/asset/update', asset)
            
            .then(response => {
                
                console.log(response);
                this.$message({
                    message: '修改成功',
                    type:'success'
                });
                this.getasset();
            }).catch(error => {
                console.log("update login log failed" + error);
            });
        },

        insertasset(asset) {
            console.log("新增的对象：", asset);
            // 新增登录日志 最后insert路径不写 /
            this.$axios.post('http://127.0.0.1:8082/asset/add', asset)
            .then(response => {
                console.log(response);
                this.$message({
                    message: '新增成功',
                    type:'success'
                });
                this.insertOpen = false;
                this.getasset();
            }).catch(error => {
                console.log("insert login log failed" + error);
        });
    },
    search(asset) {
        // 搜索登录日志
        console.log("搜索条件：", asset);
        this.$axios.get('http://127.0.0.1:8082/asset/search', asset)
        .then(response => {
            this.assetsList = response.data.data;
            console.log("查到的值：",response.data.data);
            this.getasset();
        }).catch(error => {
            console.log("search login log failed" + error);
        });
    },
        

        // 表格相关

        /**
         * 验证表单
         * @param asset 登录日志对象
         */
        vaildForm(asset) {
            // 表单验证
            this.$refs.multipleTable.validate((valid) => {
                if (valid) {
                    this.submitForm(asset);
                } else {
                    alert('请检查输入项');
                    return false;
                }
            });
        },

        /**
         * 提交表单
         * @param asset 登录日志对象
         */
        submitForm(asset) {
            // 新增或修改登录日志   
            if(this.asset.id){
                // 有主键修改登录日志
                this.updateType = "修改";
                this.handleUpdate(asset);
            } else {
                // 没有主键就新增
                this.updateType = "新增";
                this.handleInsert(asset);
            }  
        },

        add() {
            
            this.updateType = "新增";
            this.open = true; 
            this.clearSelection();
            
        },

        /**
         * 清空选择
         * @param {Object} rows 行数据
         */
        clearSelection() {
            this.asset = {
                id: '',
                purchaseDate: '',
                assetName: '',
                status: '',
                purchasePrice: '',
            };
            
        },

        /**
         * 选择行对象
         * @param rows 行数据
         */
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);

          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
        },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
      
        },
      };
</script>
    <style scoped>
 

</style>